<template>
  <div class="my-book-banner">
    <img v-if="bannerUrl" :src="bannerUrl" alt />
    <div class="my-book-banner-text">
      <h1 v-if="bannerText.h1">{{bannerText.h1}}</h1>
      <h2 v-if="bannerText.h2">{{bannerText.h2}}</h2>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: [
        "http://data.youxiu.info/yidianBook/banner_0.jpg",
        "http://data.youxiu.info/yidianBook/banner_1.jpg",
        "http://data.youxiu.info/yidianBook/banner_2.jpg",
        "http://data.youxiu.info/yidianBook/banner_3.jpg",
        "http://data.youxiu.info/yidianBook/banner_4.jpg",
        "http://data.youxiu.info/yidianBook/banner_5.jpg",
        "http://data.youxiu.info/yidianBook/banner_6.jpg",
        "http://data.youxiu.info/yidianBook/banner_7.jpg",
        "http://data.youxiu.info/yidianBook/banner_8.jpg"
      ],
      text: [
        {
          h1: "我突然学会了拒绝热闹，却还未悟透真正的冷清。",
          h2: ""
        },
        {
          h1: "剑未佩妥，出门已是江湖",
          h2: "痞子蔡"
        },
        {
          h1: "人生自有情痴，此恨不关风与月",
          h2: "— 欧阳修《玉楼春》"
        },
        {
          h1: "我舒展开来又蜷缩回去，我挣脱自身独自置身于伟大的风暴中。",
          h2: "— 里尔克"
        },
        {
          h1:
            "一个人在家看电视并不算寂寞，苍白地坐在话不投机人群之中才真正的凄凉",
          h2: "— 亦舒"
        },
        {
          h1: "儿时仰星光，举手若能摘，于今七尺身，天高不可及",
          h2: "— 杜随《杂诗》"
        },
        {
          h1:
            "未曾青梅，青梅枯萎，芬芳满地；不见竹马，竹马老去，相思万里。从此，我爱上的人都像你。",
          h2: "— 王茂《永远记得你》"
        },
        {
          h1: "无聊是对欲望的欲望，我的孤独认识你的孤独。",
          h2: ""
        },
        {
          h1:"让花谢的是风雨，让花开的也是风雨，但没了风雨，花不会开也不会落。",
          h2: "— 超觉寺"
        },
        {
          h1: "是一分一秒的陪伴，累积成我们不可替代的情感。",
          h2: "— 巴克曼《时间的礼物》"
        },
        {
          h1: "今人不见古时月，今月曾经照古人。",
          h2: "— 李白《把酒问月·故人贾淳令予问之》"
        },
        {
          h1: "这世上有只有一种成功，就是能够用自己喜欢的方式度过自己的一生。",
          h2: ""
        },
        {
          h1: "人生一世，草生一春，来如风雨，去似微尘。”是什么意思",
          h2: "— 增广贤文"
        },
        {
          h1: "年轻时，不拖累生你的人，年老时，不拖累你生的人。",
          h2: ""
        },
        {
          h1: "谈钱伤感情！谈感情伤钱！",
          h2: ""
        },
        {
          h1: "光鲜的外表，稀烂的人生！",
          h2: ""
        },
        {
          h1: "冰冻三尺非一日之寒，小腹三层非一日之馋",
          h2: ""
        },
        {
          h1: "有人说世界上99%的事都能用钱解决，可他们没说的是，解决剩下的1%，需要更多的钱。",
          h2: ""
        },
        {
          h1: "不是每个擦肩而过的都会认识，也不是每个相识的都会让人牵挂。",
          h2: ""
        },
        {
          h1: "人生的四个境界：不想上学，不想上班，不想上医院，不想上西天。",
          h2: ""
        },
        {
          h1: "生活多美好，有吃有喝有电脑。",
          h2: ""
        },
        {
          h1: "历史，只有人名是真的；小说，只有人名是假的。",
          h2: ""
        },
        {
          h1: "五毛和五毛是最幸福的 因为他们凑成了一块",
          h2: ""
        },
        {
          h1: "世上最好的保鲜就是不断进步，让自己成为一个更好的人。",
          h2: ""
        },
        {
          h1: "扯淡间，工作灰飞烟灭……",
          h2: ""
        },
        {
          h1: "你最希望别人骂你什么？",
          h2: "有钱了不起啊…"
        },
        {
          h1: "失败是成功之母，可失败总是不孕不育。",
          h2: ""
        },
        {
          h1: "新闻联播的流弊之处在于就算你一直在换台，也能完整地看完一条新闻。",
          h2: ""
        },
        {
          h1: "子曰：君子怀德，小人怀土；君子怀刑，小人怀惠",
          h2: ""
        },
        {
          h1: "想读一本书，却放不下眼前的手机",
          h2: ""
        },
        {
          h1: "既已出港，就要杨帆起航，走到哪里是哪里，不可坐以待毙",
          h2: "太宰治[斜阳]"
        },
        {
          h1: "即使套上垃圾袋，也没有人觉得垃圾桶干净",
          h2: "—偏见"
        },
        {
          h1: "生命里面很多事情，沉重婉转至不可说",
          h2: "黄碧云《失城》"
        },
        {
          h1: "要你愿意坚持下去，无论是多么微小的变化，都会随着岁月的累积，复合成显著的结果",
          h2: "朗读者"
        },
        {
          h1: "迷失的人迷失了，相逢的人会再相逢",
          h2: "村上春树《挪威的森林》"
        },
        {
          h1: "很多时候，沉默不是无话可说，而是一言难尽",
          h2: "独木舟《一粒红尘》"
        },
        {
          h1: "上士闻道，勤而行之；中士闻道，若存若亡；下士闻道，大笑之",
          h2: "老子《道德经》"
        },
        {
          h1: "活了这么多年发现，唯一坚持下去的，就是每天给手机充电。",
          h2: ""
        },
        {
          h1: "纵有千古，横有八荒；前途似海，来日方长；",
          h2: "梁启超《少年中国说》"
        },
        {
          h1: "人的一生会遇到两个人，一个惊艳了时光，一个温柔了岁月。",
          h2: "苏剧[经年]"
        },
        {
          h1: "不要只会高谈阔论，找自己想的去做吧",
          h2: ""
        },
        {
          h1: "我只能送你到这里了，剩下的路要自己走不要回头",
          h2: "宫崎骏《千与千寻》"
        },
        {
          h1: "时间万物介多变，永远不要说永远",
          h2: "《放牛班的春天》"
        },
        {
          h1: "你如今的气质里，藏着你走过的路，读过的书，和爱过的人。",
          h2: "卡萨布兰卡"
        },
        {
          h1: "生死契阔，与子成说。执子之手，与子偕老。",
          h2: "《诗经》"
        },
        {
          h1: "凡事到了回忆的时候，真是得像假的一样",
          h2: ""
        },
        {
          h1: "柔不是弱，是容，是收，是含",
          h2: "《棋王》"
        },
        {
          h1: "心里有所觉，但亦作不解",
          h2: "《夏目友人帐》"
        },
        {
          h1: "我的酒量，大概就是一打啤酒或者半斤白酒，再或者你的微微一笑",
          h2: ""
        },
        {
          h1: "没有不可治愈的伤痛，没有不能结束的沉沦，所有失去的，会以另一种方式归来",
          h2: "[许愿树]"
        },
        {
          h1: "我们总是记得自己在一条船上，却忘了自己在一条河上",
          h2: "马东[奇葩说]"
        },
        {
          h1: "一生太短，一瞬好长",
          h2: "毛不易[无问]"
        },
        {
          h1: "回忆从内部温暖你，同时也会从内部剧烈的切割你",
          h2: "[海边的卡夫卡]"
        },
        {
          h1: "有些事情我不看透，不是我太笨，只是我太善良。",
          h2: "—樱桃小丸子"
        },
        {
          h1: "你没有如期归来，这正是离别的意义。",
          h2: "北岛《白日梦》"
        },
        {
          h1: "人心中都有自己的早晨，时候到了人会自己醒来",
          h2: "刘亮程《一个人的村庄》"
        },
        {
          h1: "理性为纲，及时止损，努力让生活处于自己的可控范围内。",
          h2: ""
        },
        {
          h1: "你以为今天是最糟的一天么，明天会让你改变这个看法的。",
          h2: ""
        },
        {
          h1: "初闻不知曲中意，再听已是付费曲",
          h2: ""
        },
        {
          h1: "一懒众衫小，薪尽自然凉。",
          h2: ""
        },
        {
          h1: "热水治不了百病，情话过不了一生",
          h2: ""
        },
        {
          h1: "不可能的事，别问，别等，别期待",
          h2: ""
        },
        {
          h1: "所有动听的话，配上实际行动才有意义",
          h2: ""
        },
        {
          h1: "一懒众衫小，薪尽自然凉。",
          h2: ""
        },
        {
          h1: "酒半醉就好，喝太多就醉了；爱半真就好，爱太深就碎了；",
          h2: ""
        },
        {
          h1: "不为模糊不清的未来担忧，只为清清楚楚的现在努力",
          h2: ""
        },
        {
          h1: "创新决定我们能飞得有多高；而品质决定我们能够走多远；",
          h2: ""
        },
        {
          h1: "风景一直都在，而那颗年少的心终会消失，趁还不老，趁岁月安好",
          h2: ""
        },
        {
          h1: "其实结不结婚都会后悔，巷子里的猫很自由却没有归宿，围墙里的狗有归宿终身都得低头，人生这道选择题怎么选都会有遗憾",
          h2: ""
        },
        {
          h1: "如果有人给你发天空的照片，记得要说：“我也想你了”。因为‘晓看天色暮看云，行也思君坐也思君’",
          h2: ""
        },
        {
          h1: "如果运气不好，那就试试勇气",
          h2: ""
        },
        {
          h1: "为了满足用户要求，格力经常需要加班工作。我会尽可能让他做自己喜欢的事情，如果实在不满足这个条件，那一定要服从组织。如果不能服从可以选择离开。希望离职的员工能把格力文化带到别的企业，但无论在哪家单位都要对自己负责。",
          h2: "董明珠"
        },
        {
          h1: "悲从心中起，百般不如人；傲从骨里生，万难不屈膝",
          h2: ""
        },
        {
          h1: "你遇见的我，是被这个世界打磨后的我，你没见过我的青春，你认识我时已是待婚年龄",
          h2: ""
        },
        {
          h1: "无数渺小的思考填满了人的一生",
          h2: ""
        },
        {
          h1: "穷且无聊的人最容易深情，富而忙碌的人最随意",
          h2: ""
        },
        {
          h1: "但凡要不了你的命，人生随时都可以重启，柳岸花会明，枯木再逢春",
          h2: ""
        },
        {
          h1: "如果运气不好，那就试试勇气",
          h2: ""
        },
        {
          h1: "星辰和大海都需要门票，诗和远方的路费都很贵",
          h2: ""
        },
        {
          h1: "不忘初心方得始终，初心易得始终难守",
          h2: ""
        },
        {
          h1: "一个人知道自己为什么而活，就可以忍受任何一种生活",
          h2: "—尼采"
        },
        {
          h1: "君子虽不玩物丧志，亦常借景调心",
          h2: ""
        },
        {
          h1: "最明亮时总是最迷茫，最繁华时也是最悲凉。",
          h2: "—《京华烟云》"
        },
        {
          h1: "衰老并不是从中年开始，而是从对生活的的厌倦开始",
          h2: "—《白问人生需百误》"
        },
        {
          h1: "静坐常思已过，闲谈莫论人非",
          h2: "—《格言联壁》"
        },
        {
          h1: "我有所念人，隔在远远乡。我有所感事，结在深深肠。",
          h2: "白居易·夜雨"
        },
        {
          h1: "手执烟火以谋生，心怀诗意以谋爱",
          h2: ""
        },
        {
          h1: "时光的沙漏里，细沙流走的是光阴。淡淡的檀香里，袅袅燃尽的是光阴。",
          h2: "[林花谢了]"
        },
        {
          h1: "创造一个没人想去创造的历史",
          h2: "英雄联盟LGD"
        },
        {
          h1: "LGD两种“洗白”方式，第一是夺冠，第二是决赛psg对R7。",
          h2: "英雄联盟S10总决赛"
        },
        {
          h1: "情不敢至深，恐大梦一场。卦不敢算尽，畏天道无常",
          h2: "《晴雪夜》"
        }
      ],
      bannerUrl: "http://data.youxiu.info/yidianBook/banner_0.jpg",
      bannerText: {
        h1: "",
        h2: ""
      }
    };
  },
  created() {},
  mounted() {
    this.getBanner();
  },
  onPullDownRefresh() {
    // console.log("下拉刷新 组件");
    this.getBanner();
  },
  methods: {
    // 获取随机banner图 和 文字
    getBanner() {
      let selUrl = this.url[Math.ceil(Math.random() * this.url.length)];
      let selText = this.text[Math.ceil(Math.random() * this.text.length)];
      if (selUrl) {
        this.bannerUrl = "";
        this.bannerUrl = selUrl;
        // console.log(this.bannerUrl);
      }
      if (selText) {
        this.bannerText = selText;
        // console.log(this.bannerText);
      }
    }
  }
};
</script>

<style>
.my-book-banner {
  width: 100%;
  height: auto;
  overflow: hidden;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
  position: relative;
  border-radius: 0 0 8px 8px;
}
.my-book-banner img {
  width: 100%;
  display: block;
}
.my-book-banner-text {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  color: #ffffff;
  opacity: 0.9;
  background-color: rgba(0, 0, 0, 0.7);
  padding-top: 12px;
  font-size: 14px;
  /* font-weight: bold; */
}
.my-book-banner-text h1 {
  /* text-align: left; */
  text-align: justify;
  padding: 0 20px 10px 20px;
}
.my-book-banner-text h2 {
  text-align: right;
  padding: 0 20px 12px 0;
}
</style>